<template>
    <div
        ref="descRef"
        class="omit-box"
        :style="{ '-webkit-line-clamp': startFlag ? endLineClamp : lineClamp }"
    >
        <span ref="testRef" class="test-div">测</span>
        <span name="info">
            <span
                class="comment-breakpoint"
                @click.stop="breakpoint"
                v-if="comment.resourceStart || comment.resourceStart === 0"
                ><span> {{ getTimes(comment.resourceStart) }}</span
                ><span
                    v-if="
                        comment.resourceEnd &&
                        comment.resourceStart != comment.resourceEnd
                    "
                    >～{{ getTimes(comment.resourceEnd) }}
                </span>
            </span>
            {{ comment.content }}</span
        >
        <span @click="onIsExtend" class="omit-out" v-if="spanFlag && isAll"
            >收起</span
        >
        <div v-if="!isAll" class="omit-tag" @click.stop="onIsExtend">
            <div class="omit-tag-bg"></div>
            <div class="omit-tag-ct">全文</div>
        </div>
    </div>
</template>

<script setup>
import { ref, nextTick, watch, computed, onBeforeMount } from 'vue';

const props = defineProps({
    comment: {
        // 文本
        type: Object,
        default: () => {}
    },
    lineClamp: {
        type: Number,
        default: 3
    },
    lineHeight: {
        type: Number,
        default: 22
    },
    isExtend: {
        type: Boolean,
        default: true
    }
});
const emit = defineEmits(['on-timeSlice']);

const startFlag = ref(true);
const spanFlag = ref(false);

const isAll = ref(true);
const endLineClamp = ref(1000);

const descRef = ref(null);
const testRef = ref(null);

// onBeforeMount(() => {
//     for (let i = 0; i < props.lineClamp - 1; i++) {
//         lineSpan.value = lineSpan.value + '1'
//     }
// })
// props.lineClamp

const onIsExtend = (e) => {
    if (!props.isExtend) {
        return;
    }
    e.stopPropagation();
    isAll.value = !isAll.value;
    startFlag.value = isAll.value;
};
function getTimes(t) {
    if (!t && t !== 0) return '';
    let h = parseInt((t / 60 / 60) % 24);
    let m = parseInt((t / 60) % 60);
    let s = parseInt(t % 60);
    // 三元表达式 补零 如果小于10 则在前边进行补零 如果大于10 则不需要补零
    h = h < 10 ? '0' + h : h;
    m = m < 10 ? '0' + m : m;
    s = s < 10 ? '0' + s : s;
    return `${h}:${m}:${s}`;
}

function breakpoint() {
    console.log(props.comment);
    let { bizId, id, itemId, resourceEnd, resourceStart } = props.comment;
    emit('on-timeSlice', { bizId, id, itemId, resourceEnd, resourceStart });
}

watch(
    () => props.comment.content,
    (val) => {
        if (val) {
            setTimeout(() => {
                const pHeight = descRef.value && descRef.value.clientHeight;
                const testHeight = testRef.value && testRef.value.clientHeight;
                const endHeight = testHeight * props.lineClamp;
                console.log(testHeight, '----', endHeight, '--', pHeight);
                if (3 + endHeight < pHeight) {
                    startFlag.value = false;
                    spanFlag.value = true;
                    isAll.value = false;
                } else {
                    startFlag.value = true;
                }
            }, 1);
        }
    },
    {
        immediate: true
    }
);
</script>

<style lang="scss" scoped>
.test-div {
    width: 0;
    /* height: 46px; */
    position: absolute;
    left: -50px;
}
.omit-box {
    line-height: 22px;
    overflow: hidden;
    display: -webkit-box;
    position: relative;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
    font-size: 14px;
    color: #171A1D;
    line-height: 22px;
}
.omit-tag-bg {
    width: 47px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
}
.omit-tag-ct {
    background: #fff;
    color: #0084f6;
    font-size: 14px;
}
.omit-overflow {
    word-break: break-all;
    white-space: normal;
    /* padding:0 2em; */
    /* display: list-item; */
}
.omit-tag {
    position: absolute;
    right: 0;
    bottom: 0;
    line-height: 22px;
    display: flex;
}
.min-width {
    min-width: 47px;
}
.c-content-a {
    width: 0;
    /* height: 46px; */
    float: right;
    clear: both;
    margin-bottom: 4px;
}
.font-size-18 {
    font-size: 18px;
}
.omit-out {
    float: right;
    color: #0084f6;
    font-size: 14px;
    padding: 0 5px 0;
}
.comment-breakpoint {
    color: #0084f6;
    font-size: 14px;
}
</style>
